
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>购物车 - 潮玩商城</title>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap" rel="stylesheet">
    <style>
        /* Labubu风格颜色变量 */
        :root {
            --primary: #FF6B9B;     /* Labubu主色调：粉色 */
            --secondary: #9A7DFF;   /* Labubu辅助色：紫色 */
            --accent: #FFD166;      /* Labubu强调色：黄色 */
            --bg-light: #FFF5F8;    /* Labubu浅色背景 */
            --text-dark: #5A5A5A;   /* Labubu深色文本 */
        }

        body {
            background-color: var(--bg-light);
            color: var(--primary);
            font-family: 'Segoe UI', sans-serif;
            margin: 0;
            padding: 20px;
        }

        h2 {
            color: var(--primary);
            text-shadow: 0 0 10px var(--primary);
            margin-bottom: 20px;
        }

        .navbar {
            padding: 15px;
            background: white;
            border-bottom: 2px solid var(--primary);
            margin-bottom: 20px;
            font-family: 'Orbitron', sans-serif;
        }

        .navbar a {
            color: var(--primary);
            margin-right: 20px;
            text-decoration: none;
        }

        .navbar a:hover {
            color: var(--secondary);
            text-shadow: 0 0 5px var(--secondary);
        }

        table {
            width: 100%;
            border-collapse: collapse;
            background: white;
            box-shadow: 0 0 10px var(--primary);
        }

        th, td {
            border: 1px solid var(--primary);
            padding: 10px;
            text-align: center;
        }

        th {
            background-color: white;
        }

        input[type="number"] {
            background: white;
            border: 1px solid var(--primary);
            color: var(--text-dark);
            width: 60px;
            text-align: center;
        }

        input[type="submit"], button {
            background-color: var(--primary);
            color: white;
            border: none;
            padding: 8px 16px;
            font-weight: bold;
            cursor: pointer;
            margin-top: 15px;
            margin-right: 10px;
        }

        input[type="submit"]:hover, button:hover {
            background-color: var(--secondary);
            box-shadow: 0 0 10px var(--secondary);
        }

        a.action-link {
            color: var(--primary);
            text-decoration: none;
        }

        a.action-link:hover {
            color: var(--secondary);
            text-shadow: 0 0 5px var(--secondary);
        }

        .tip {
            font-size: 0.9em;
            color: #888;
            margin-top: 5px;
        }

        .delete-btn {
            background-color: #ff6b6b;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 3px;
            cursor: pointer;
            font-size: 12px;
        }

        .delete-btn:hover {
            background-color: #ff4757;
        }
    </style>
    <script>
        function qtyChanged() {
            alert("修改了数量，请点击'更新购物车'按钮保存！");
        }

        function confirmDelete(cartId) {
            if(confirm("确定要从购物车中删除这个商品吗？")) {
                window.location.href = "${pageContext.request.contextPath}/cart/delete/" + cartId;
            }
        }
    </script>
</head>
<body>

<!-- 顶部导航栏 -->
<div class="navbar">
    <c:choose>
        <c:when test="${sessionScope.loginUser != null}">
            欢迎您，${sessionScope.loginUser.uname}
            <a href="${pageContext.request.contextPath}/goods/frontList">商品首页</a>
            <a href="${pageContext.request.contextPath}/cart/list">购物车</a>
            <a href="${pageContext.request.contextPath}/order/myOrders">我的订单</a>
            <a href="${pageContext.request.contextPath}/user/logout" style="color: #ff6b6b;">退出登录</a>
        </c:when>
        <c:otherwise>
            <a href="${pageContext.request.contextPath}/login.jsp">登录</a>
            <a href="${pageContext.request.contextPath}/register.jsp">注册</a>
        </c:otherwise>
    </c:choose>
</div>

<h2>🛒 我的购物车</h2>

<form action="${pageContext.request.contextPath}/cart/update" method="post">
    <table>
        <thead>
        <tr>
            <th>选择</th>
            <th>商品图片</th>
            <th>商品名称</th>
            <th>单价</th>
            <th>数量</th>
            <th>小计</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach var="cart" items="${cartList}" varStatus="status">
            <tr>
                <td>
                    <input type="checkbox" name="userCarts[${status.index}].checked" value="1"
                           <c:if test="${cart.checked == 1}">checked</c:if> />
                </td>
                <td>
                    <img src="${cart.coverUrl}" width="80" height="80" />
                </td>
                <td>${cart.goodsName}</td>
                <td>${cart.price}</td>
                <td>
                    <input type="number" name="userCarts[${status.index}].count" value="${cart.count}" min="1" />
                    <input type="hidden" name="userCarts[${status.index}].cartId" value="${cart.cartId}" />
                    <input type="hidden" name="userCarts[${status.index}].userId" value="${cart.userId}" />
                    <input type="hidden" name="userCarts[${status.index}].goodsId" value="${cart.goodsId}" />
                </td>
                <td>￥<c:out value="${cart.price * cart.count}" /></td>
                <td>
                    <button type="button" class="delete-btn" onclick="confirmDelete(${cart.cartId})">删除</button>
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
    <button type="submit">更新购物车</button>
</form>
<!-- 提交订单表单 -->
<form action="${pageContext.request.contextPath}/order/checkout" method="post" style="margin-top: 20px;">
    <c:forEach var="item" items="${cartList}">
        <input type="checkbox" name="selectedIds" value="${item.cartId}" /> ${item.goodsName} - 数量: ${item.count} <br/>
    </c:forEach>

    <input type="submit" value="提交订单" />
</form>

</body>
</html>

